<template>
  <div style="max-height: 800px;overflow:auto">
    <p>PDF 测试</p>
    <div v-show="!loading" class="pdf-view">
    <div class="pdf" id="pdfView"></div>
  </div>
  <div v-loading.fullscreen.lock="loading">正在加载</div>
  </div>
</template>
<script setup lang="ts">
import Pdfh5 from "pdfh5/js/pdfh5.js";
import "pdfh5/css/pdfh5.css";
import { onMounted, ref, nextTick } from "vue";

const visible = ref(false);
const loading = ref(true);

onMounted(() => {
  openPdf("https://pdfobject.com/pdf/sample-3pp.pdf");
});

const openPdf = (url) => {
  visible.value = true;

  nextTick(() => {
    const pdfh5 = new Pdfh5("#pdfView", {
      pdfurl: url,
    });

    pdfh5.on("complete", (status, msg, time) => {
      loading.value = false;
    });
  });
};
</script>

<style lang="less" scoped>
.pdf-view {
  height: 100%;
  .pdf {
    height: 100%;
  }
  /deep/ .pdfViewer {
    padding: 0;
  }
}
 
</style>
